<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js" ><!--<![endif]-->

    <head>
    
        <!-- BEGIN: basic page needs -->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
        <title>REDDESIGN - Site Template</title>
        <!-- END: basic page needs -->
        
        <!-- BEGIN: css -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/skin-default.css" rel="stylesheet" type="text/css" />
        <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
        <!-- END: css -->
            
        <!-- BEGIN: js -->
    	<script type="text/javascript" src="../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script> 
        <script type="text/javascript" src="js/respond.js"></script> 
        <script type="text/javascript" src="js/superfish.js"></script>
        <script type="text/javascript" src="js/hoverIntent.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
        <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
        <script type="text/javascript" src="js/jquery.quicksand.js"></script>
        <script type="text/javascript" src="js/jquery.tweet.js"></script>
        <script type="text/javascript" src="js/jquery.flexslider.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script> 
        <script type="text/javascript" src="js/main.js"></script>
        <!--[if lt IE 9]><script src="../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        <!-- END: js -->
        
    </head>
    
<body>

<!-- .container -->
<section class="container">


    <!-- #header  -->
    <header id="header">
        <!-- .row -->
        <div class="row">

            <!-- .span3.logo -->
            <div class="span3 logo">
                <a href="index.html" ><img src="images/logo.png" alt="Logo" /></a>
            </div><!-- /.span3.logo -->
            
            <!-- .span9 -->
            <nav class="span9">

                <!-- #menu -->
                <ul id="menu">
                    <li><a href="index.html" data-description="Home Page">Home</a></li>
                    <li><a href="about.html" class="current" data-description="About Page">About</a>
                        <ul>
                            <li><a href="team.html">Team</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li><a href="portfolio.html" data-description="Portfolio Page">Portfolio</a>
                        <ul>
                            <li><a href="portfolio-left.html">Portfolio Left Sidebar</a></li>
                            <li><a href="portfolio-right.html">Portfolio Right Sidebar</a></li>
                            <li><a href="portfolio-single-left.html">Portfolio Single Left</a></li>
                            <li><a href="portfolio-single-right.html">Portfolio Single Right</a></li>
                        </ul>
                    </li>
                    <li><a href="blog-left.html" data-description="Blog Page">Blog</a>
                        <ul>
                            <li><a href="blog-right.html">Blog Right Sidebar</a></li>
                            <li><a href="blog-without.html">Blog Without Sidebar</a></li>
                            <li><a href="blog-single-left.html">Blog Single Left</a></li>
                            <li><a href="blog-single-right.html">Blog Single Right</a></li>
                            <li><a href="blog-single-without.html">Blog Single Without</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-description="Features Page">Features</a>
                        <ul>
                            <li><a href="scaffolding.html">Scaffolding</a></li>
                            <li><a href="base-css.html">Base CSS</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="jquery-plugins .html">jQuery plugins</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html" data-description="Contact Page">Contact</a></li>
                    <li><a href="../../themeforest.net/item/reddesign-html-responsive-portfolio-template/2784878@ref=bingumd" data-description="Purchase">Purchase</a></li>
                </ul><!-- /#menu -->

            </nav><!-- .span9-->

        </div><!-- /.row -->
    </header><!-- /#header  -->


    <!-- #welcome -->
    <section id="welcome">

        <!-- .span4 -->
        <div class="span5">
            <h1>Welcome to the <span class="color">RedDesign</span> template demo</h1>
        </div><!-- /.span4 -->

        <!-- .span6 -->
        <div class="span6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas uctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea. Lorem ipsum dolor sit amet, consecteturadipiscing elit.</p>
        </div><!-- /.span6 -->

    </section><!-- /#welcome -->


    <!-- .row -->
    <div class="row">

        <!-- #page.span9.alignright -->
        <section id="page" class="span9 alignright">

            <h2>The Team</h2>

            <p>Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem. Nullam mauris nibh, ullamcorper vitae vehicula vitae, consectetur vestibulum nulla. Duis hendrerit risus rhoncus ipsum viverra varius tincidunt lorem mattis. Cras accumsan diam vitae turpis eleifend a elementum justo tincidunt. Quisque dignissim cursus magna nec mattis. Vestibulum non enim magna, vitae sodales massa. Fusce eu nisi eu lacus vehicula rutrum a sit amet neque. Morbi tempus feugiat dui in blandit. Pellentesque non blandit felis. Donec metus tortor, tristique sit amet porttitor sed, sagittis ac felis. Vivamus condimentum sollicitudin ante, vel tristique nibh hendrerit in. </p>

            <div class="divider"></div>

            <!-- .row -->
            <div class="row team">

                <article class="span3">
                    <img src="example/team1.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Web Developer</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

                <article class="span3">
                    <img src="example/team2.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Web Designer</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

                <article class="span3">
                    <img src="example/team3.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Developer</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

                <article class="span3">
                    <img src="example/team4.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Account Manager</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

                <article class="span3">
                    <img src="example/team5.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Graphic Designer</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

                <article class="span3">
                    <img src="example/team6.jpg" alt="Images" />
                    <div data-rel="tooltip" title="Pellentesque pellentesque, turpis vel commodo imperdiet, eros justo mattis lorem, id ornare tellus leo non lorem.">
                        <h2>Alberta Thomas</h2>
                        <h4>Rails Developer</h4>

                        <!-- .social -->
                        <ul class="social clearfix">
                            <li class="twitter"><a href="#" data-rel="tooltip" title="Twitter"></a></li>
                            <li class="facebook"><a href="#" data-rel="tooltip" title="Facebook"></a></li>
                            <li class="dribbble"><a href="#" data-rel="tooltip" title="Dribbble"></a></li>
                            <li class="vimeo"><a href="#" data-rel="tooltip" title="vimeoimeo"></a></li>
                            <li class="flickr"><a href="#" data-rel="tooltip" title="Flickr"></a></li>
                            <li class="pinterest"><a href="#" data-rel="tooltip" title="Pinterest"></a></li>
                        </ul><!-- /.social -->

                    </div>
                </article>

            </div><!-- /.row -->

        </section><!-- /#page.span9.alignright -->

        
        <!-- #sidebar.span3.alignleft -->
        <aside id="sidebar" class="span3 alignleft">

            <!-- .widget -->
            <div class="widget">
                <h3 class="title">Categories</h3>

                <ul class="categories">
                    <li><a href="about.html">About</a></li>
                    <li class="current"><a href="team.html">Team</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="services.html">Services</a></li>
                </ul>
            </div><!-- /.widget -->

        </aside><!-- /#sidebar.span3.alignleft -->

    </div><!-- /.row -->


    <!-- #footer.container -->
    <footer id="footer" class="container">
        
        <!-- .row .clearfix -->
        <div class="row clearfix">

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">About Us</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris. Donec vel felis metus, et laoreet enim. Donec congue nunc sit amet lacus lacinia pretium.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</p>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Latest Tweets</h3>

                <div class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $(".tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 2,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Recent Post</h3>

                <ul>
                    <li class="first">
                        <span class="date">April 18, 2012</span>
                        <a href="default.htm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>


                    <li>
                        <span class="date">April 18, 2012</span>
                        <a href="default.htm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>
                </ul>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">
                
                <h3 class="title">Follow Us</h3>

                <!-- .social -->
                <ul class="social">
                    <li class="twitter"><a href="#">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="dribbble"><a href="#">dribbble</a></li>
                    <li class="vimeo"><a href="#">vimeo</a></li>
                    <li class="flickr"><a href="#">flickr</a></li>
                    <li class="pinterest"><a href="#">pinterest</a></li>
                </ul><!-- /.social -->

            </div><!-- /.span3 -->

        </div><!-- /.row .clearfix -->

        <!-- #copyright.clearfix -->
        <div id="copyright" class="clearfix">

            <p>Copyright 2012. All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>

            <!-- #footer-menu -->
            <nav id="footer-menu">
                <ul class="clearfix">
                    <li><a href="#" class="current" data-description="Home Page">Home</a>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav><!-- /#footer-menu -->

        </div><!-- /#copyright .clearfix -->

    </footer><!-- /#footer .container -->


</section><!-- /.container -->


</body>
</html>